// 获取
const oForm = document.querySelector('.form')
const aInput = document.querySelectorAll('input[type=text], input[type=password]')
const oPhoneCode = oForm.querySelector('.phoneCode')
const oSubmit = oForm.querySelector('.btn')
const oCheck = oForm.querySelector('input[type=checkbox')
const oBtn = oForm.querySelector('.btn')
const oH = oForm.querySelector('.form h2')
// 定义所有判断开关，全为 true 则提交数据给后台
const flagArr = [false, false, false, false, false, false]

// 手机号
let rePhone = /^1[3-9]\d{9}$/

aInput[0].onfocus = function () {
    this.nextElementSibling.nextElementSibling.style.display = 'block'
    this.nextElementSibling.style.display = 'none'
    this.nextElementSibling.nextElementSibling.innerHTML = '请输入11位数字'

    if ((this.value).length === 11) {
        this.nextElementSibling.style.display = 'none'
    }
}

aInput[0].onblur = function () {
    this.nextElementSibling.style.display = 'block'
    this.nextElementSibling.nextElementSibling.innerHTML = '手机号不正确'

    // 手机号长度
    // console.log((this.value).length )

    if ((this.value).length < 11 && (this.value).length > 0) {

        this.nextElementSibling.style.display = 'block'
        this.nextElementSibling.style.backgroundPosition = '-162px 0'
        this.nextElementSibling.nextElementSibling.innerHTML = '请输入正确的手机号码'

        flagArr[0] = false

    }
    else if ((this.value).length === 0) {

        this.nextElementSibling.style.display = 'block'
        this.nextElementSibling.style.backgroundPosition = '-162px 0'
        this.nextElementSibling.nextElementSibling.innerHTML = '请输入手机号'

        flagArr[0] = false
    }

    else {

        if (rePhone.test(this.value)) {

            this.nextElementSibling.style.backgroundPosition = '-139px 0'
            this.nextElementSibling.nextElementSibling.style.display = 'none'

            flagArr[0] = true
        }

        else {

            this.nextElementSibling.style.backgroundPosition = '-162px 0'
            this.nextElementSibling.nextElementSibling.style.display = 'block'

            flagArr[0] = false
        }
    }
    // console.log(flagArr)

}

// 验证码
let verifyCode = new GVerify("v_container")
let res = null

aInput[1].onblur = function () {
    res = verifyCode.validate(aInput[1].value);
    this.nextElementSibling.style.display = 'block'
    this.nextElementSibling.nextElementSibling.innerHTML = '验证码不正确'
    if (res) {
        this.nextElementSibling.style.backgroundPosition = '-139px 0'
        this.nextElementSibling.nextElementSibling.style.display = 'none'

        flagArr[1] = true

    } else {
        this.nextElementSibling.style.backgroundPosition = '-162px 0'
        this.nextElementSibling.nextElementSibling.style.display = 'block'

        flagArr[1] = false

    }
}

// 验证手机号和密码为空时，提示相应的错误信息

// aInput[2].onfocus = function () {
//     if (!rePhone.test(aInput[0].value)) {
//         console.log('手机号有问题')
//         return
//     }
//     if (!res) {
//         console.log('验证码有问题')
//         return
//     }
// }

// 获取验证码时筛选的未填写及填写错误的信息

let timer = null

aInput[2].onblur = function () {
    if (!aInput[2].value) {
        // console.log('手机号有问题')

        this.nextElementSibling.style.display = 'block'
        this.nextElementSibling.nextElementSibling.innerHTML = '请输入校验码'

        this.nextElementSibling.style.backgroundPosition = '-162px 0'
        this.nextElementSibling.nextElementSibling.style.display = 'block'
        // return
    } else {
        // console.log(aInput[2].value)

        if (this.value.length !== 6) {
            flagArr[2] = false

        } else {
            flagArr[2] = true
            this.nextElementSibling.style.display = 'none'
        }
    }

    console.log(flagArr)

}

oPhoneCode.onclick = function () {

    // 定义局部变量 时间 s 为 2
    let s = 2

    // console.log(flagArr)
    clearInterval(timer)
    if (flagArr[2] === false && flagArr[1] === false) {
        // clearInterval(timer)
        aInput[1].nextElementSibling.style.display = 'block'
        aInput[1].nextElementSibling.nextElementSibling.innerHTML = '请输入验证码'
        aInput[0].nextElementSibling.nextElementSibling.innerHTML = '请输入手机号'

        aInput[1].nextElementSibling.style.backgroundPosition = '-162px 0'
        aInput[1].nextElementSibling.nextElementSibling.style.display = 'block'
        aInput[0].nextElementSibling.style.backgroundPosition = '-162px 0'
        aInput[0].nextElementSibling.nextElementSibling.style.display = 'block'

    } else {

        aInput[2].nextElementSibling.nextElementSibling.style.display = 'none'


        oPhoneCode.disabled = true
        timer = setInterval(() => {
            s--
            oPhoneCode.value = `${s}秒重新发送`
            if (s === 0) {

                clearInterval(timer)
                oPhoneCode.disabled = false
                oPhoneCode.value = '获取短信验证码'
                // s = 10
            }
        }, 1000)
    }
}

// 密码
let rePass = /^(?=.*[a-z])(?=.*\d)(?=.*[$@$!%*?&])[A-Za-z\d$@$!%*.?&]{8,20}/

// 密码框输入时
aInput[3].onfocus = function () {

    this.nextElementSibling.nextElementSibling.style.display = 'block'
    this.nextElementSibling.nextElementSibling.innerHTML = '8-20位字符，数字、大小写字母、符号三种组成'
    this.nextElementSibling.nextElementSibling.style.backgroundColor = '#ccc'

}

// 密码框提示语
aInput[3].onblur = function () {

    if (rePass.test(aInput[3].value)) {
        this.nextElementSibling.style.backgroundPosition = '-139px 0'
        this.nextElementSibling.style.display = 'block'

        flagArr[3] = true

    } else {
        if (this.value === '') {
            this.nextElementSibling.style.display = 'block'
            this.nextElementSibling.style.backgroundPosition = '-162px 0'

            this.nextElementSibling.nextElementSibling.style.display = 'block'
            this.nextElementSibling.nextElementSibling.innerHTML = '请输入密码'
            this.nextElementSibling.nextElementSibling.style.backgroundColor = '#ed787f'

            flagArr[3] = false

        } else if ((this.value).length <= 20 && (this.value).length > 8) {

            this.nextElementSibling.style.display = 'block'
            this.nextElementSibling.style.backgroundPosition = '-162px 0'

            this.nextElementSibling.nextElementSibling.style.display = 'block'
            this.nextElementSibling.nextElementSibling.innerHTML = '8-20位字符，数字、大小写字母、符号三种组成'
            this.nextElementSibling.nextElementSibling.style.backgroundColor = '#ed787f'

            flagArr[3] = false

        } else if ((this.value).length <= 8 && (this.value).length > 0) {
            this.nextElementSibling.style.display = 'block'
            this.nextElementSibling.style.backgroundPosition = '-162px 0'

            this.nextElementSibling.nextElementSibling.style.display = 'block'
            this.nextElementSibling.nextElementSibling.innerHTML = '密码长度为 8 - 20 位'
            this.nextElementSibling.nextElementSibling.style.backgroundColor = '#ed787f'

            flagArr[3] = false

        }
    }
}


// 确认密码
aInput[4].onblur = function () {
    this.nextElementSibling.style.display = 'block'
    this.nextElementSibling.nextElementSibling.innerHTML = '确认密码不正确'
    if (aInput[3].value === aInput[4].value) {
        this.nextElementSibling.style.backgroundPosition = '-139px 0'
        this.nextElementSibling.nextElementSibling.style.display = 'none'

        flagArr[4] = true

    } else {

        this.nextElementSibling.style.backgroundPosition = '-162px 0'
        this.nextElementSibling.nextElementSibling.style.display = 'block'

        flagArr[4] = false
    }
}

// 我已阅读
oCheck.onchange = function () {
    if (this.checked) {
        flagArr[5] = true
        oH.style.display = 'none'
    } else {
        flagArr[5] = false
    }
    console.log(flagArr)

}

// 注册成功条件

// 数据
// var Data = [
//     {
//         re: /^1[3-9]\d{9}$/,
//         nullMsg: '手机号不能为空',
//         errorMsg: '手机号不符合规则',
//         flag: false
//     },
//     {
//         re: /^[0-9a-zA-Z]{4}$/i,
//         nullMsg: '验证码不能为空',
//         errorMsg: '验证码错误',
//         flag: false
//     },
//     {
//         re: /^\d{6}$/,
//         nullMsg: '手机验证码不能为空',
//         errorMsg: '手机验证码不符合规则',
//         flag: false
//     },
//     {
//         re: /^\w{6,16}$/,
//         nullMsg: '密码不能为空',
//         errorMsg: '密码不符合规则',
//         flag: false
//     },
//     {
//         re: /^\w{6,16}$/,
//         nullMsg: '确认密码不能为空',
//         errorMsg: '确认密码不符合规则',
//         flag: false
//     },
//     {
//         re: null,
//         nullMsg: '请勾选用户协议',
//         errorMsg: '请勾选用户协议',
//         flag: false
//     }
// ]

// 立即注册

oSubmit.onclick = function () {
    // console.log(flagArr)
    if (flagArr[5] === false) {
        oH.style.display = 'block'
        // console.log(1)
    }
    if (flagArr[5] === true) {
        for (let i = 0; i < flagArr.length; i++) {
            if (flagArr[i] === false) {

                // 验证手机号
                aInput[0].nextElementSibling.style.display = 'block'
                aInput[0].nextElementSibling.nextElementSibling.style.display = 'block'
                aInput[0].nextElementSibling.style.backgroundPosition = '-162px 0'
                aInput[0].nextElementSibling.nextElementSibling.innerHTML = '请输入手机号'

                // 验证验证码
                aInput[1].nextElementSibling.style.display = 'block'
                aInput[1].nextElementSibling.nextElementSibling.style.display = 'block'
                aInput[1].nextElementSibling.nextElementSibling.innerHTML = '验证码不正确'
                aInput[1].nextElementSibling.style.backgroundPosition = '-162px 0'

                // 校验码

                aInput[2].nextElementSibling.style.display = 'block'
                aInput[2].nextElementSibling.nextElementSibling.innerHTML = '请输入校验码'
                aInput[2].nextElementSibling.style.backgroundPosition = '-162px 0'
                aInput[2].nextElementSibling.nextElementSibling.style.display = 'block'

                // 密码

                aInput[3].nextElementSibling.style.display = 'block'
                aInput[3].nextElementSibling.style.backgroundPosition = '-162px 0'
                aInput[3].nextElementSibling.nextElementSibling.style.display = 'block'
                aInput[3].nextElementSibling.nextElementSibling.innerHTML = '请输入密码'
                aInput[3].nextElementSibling.nextElementSibling.style.backgroundColor = '#ed787f'

                // 确认密码

                aInput[4].nextElementSibling.style.display = 'block'
                aInput[4].nextElementSibling.style.backgroundPosition = '-162px 0'
                aInput[4].nextElementSibling.nextElementSibling.style.display = 'block'
                aInput[4].nextElementSibling.nextElementSibling.innerHTML = '请再次输入密码'
                return      // 终止程序运行
            }
        }
        // 循环结束 都没有进入条件那肯定都是true
        // 把数据提交给后台
        var obj = {
            telphone: aInput[0].value,
            phoneCode: aInput[2].value,
            password: aInput[3].value
        }

        console.log(obj)
    }
}